<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        h1 {
            margin-left: 12px;
        }
        #brandName {
            width: 180px;
            height: 24px;
            text-indent: 6px;
            margin-left: 12px;
            margin-top: 8px;
        }
        .btn {
            height: 24px;
            background-color: dodgerblue;
            color: #fff;
            font-weight: bold;
            padding-left: 12px;
            padding-right: 12px;
            border: 0px;
        }
        table {
            width: 800px;
            margin-top: 18px;
            margin-left: 12px;
        }
        table,td,th {
            border-collapse: collapse;
            border: 1px solid #f00;
        }
        td,th {
            width: 200px;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
        }
        .opreate {
            text-decoration: none;
            background-color: red;
            color: #fff;
            border-radius: 10px;
            padding: 4px 12px;
        }
        .btn-01 {
            color: red;
            border: none;
        }
    </style>
</head>
<body>
    <h1>The Brand Page</h1>
    <input type="text" id="brandName" name="brandName" placeholder="brand name" />
    <input type="button" class="btn" name="search" value="Search" onclick="dofindBrands()" />
    <input type="button" class="btn" name="add" value="add" onclick="doAddUI()" />
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>createdTime</th>
            <th colspan="2">operation</th>
        </tr>
        <tr th:each="brand:${list}">
            <td th:text="${brand.id}">10</td>
            <td th:text="${brand.name}">AAA</td>
            <td th:text="${#dates.format(brand.createdTime,'yyyy-MM-dd HH:mm')}">2020/12/04</td>
            <!--<td><a class="opreate" href="#">delete</a></td>
            <td><a class="opreate" href="#">update</a></td>-->
            <td><button type="button" class="btn-01" th:onclick="doDeleteById([[${brand.id}]])">delete</button></td>
            <td><button type="button" class="btn-01" th:onclick="doUpdateById([[${brand.id}]])">update</button></td>
        </tr>
    </table>
    <script>
        function doDeleteById(id) {
            if(!confirm("您确定删除吗？"))return;
            location.href="http://localhost/brand/doDeleteById/"+id;
        }

        function doAddUI() {
            location.href="/brand/doAddUI";
        }

        function doUpdateById(id) {
            location.href="/brand/doFindBrandById/"+id;
        }

        function dofindBrands() {
            var brandName = document.getElementById("brandName").value;
            location.href="/brand/dofindBrands/"+brandName;
        }
    </script>
</body>
</html>